<template>
  <div class="hot-list">
    <div class="hot-header">
      <h2 class="hot-title">
        <el-icon class="hot-icon"><Flame /></el-icon>
        Quora Hot List
      </h2>
      <div class="hot-subtitle">Popular content on the entire site, updated in real-time</div>
    </div>

    <div class="hot-items">
      <div 
        v-for="(item, index) in data" 
        :key="item.id"
        class="hot-item"
        @click="goToDetail(item)"
      >
        <!-- 排名 -->
        <div class="hot-rank" :class="getRankClass(index)">
          {{ index + 1 }}
        </div>

        <!-- 内容 -->
        <div class="hot-content">
          <h3 class="hot-item-title">{{ item.title }}</h3>
          <div class="hot-meta">
            <span class="hot-heat">{{ item.heatValue }} heat</span>
            <div class="hot-badges">
              <span v-if="item.isNew" class="hot-badge new">new</span>
              <span v-if="item.isHot" class="hot-badge hot">hot</span>
            </div>
          </div>
        </div>

        <!-- 趋势图标 -->
        <div class="hot-trend">
          <el-icon v-if="getTrend(index) === 'up'" class="trend-up">
            <CaretTop />
          </el-icon>
          <el-icon v-else-if="getTrend(index) === 'down'" class="trend-down">
            <CaretBottom />
          </el-icon>
          <el-icon v-else class="trend-stable">
            <Minus />
          </el-icon>
        </div>
      </div>
    </div>

    <!-- 查看更多 -->
    <div class="hot-footer">
      <el-button type="text" @click="$router.push('/hot')">
        View the complete hot list
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'

const router = useRouter()

// Props
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

// 获取排名样式类
const getRankClass = (index) => {
  if (index === 0) return 'rank-1'
  if (index === 1) return 'rank-2'
  if (index === 2) return 'rank-3'
  return ''
}

// 获取趋势（模拟数据）
const getTrend = (index) => {
  const trends = ['up', 'down', 'stable']
  return trends[index % 3]
}

// 跳转到详情页
const goToDetail = (item) => {
  switch (item.type) {
    case 'question':
      router.push(`/question/${item.id}`)
      break
    case 'article':
      router.push(`/article/${item.id}`)
      break
    case 'topic':
      router.push(`/topic/${item.id}`)
      break
    case 'column':
      router.push(`/column/${item.id}`)
      break
    default:
      router.push(`/question/${item.id}`)
  }
}
</script>

<style lang="scss" scoped>
.hot-list {
  background: $background-color;
  border-radius: $border-radius-large;
  overflow: hidden;
  box-shadow: $shadow-light;
}

.hot-header {
  padding: 24px 24px 16px;
  background: linear-gradient(135deg, #ec3c3c 0%, #ff6b6b 100%);
  color: white;
}

.hot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.hot-icon {
  font-size: 24px;
}

.hot-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.hot-items {
  padding: 0;
}

.hot-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid $border-light;

  &:hover {
    background-color: $background-light;
  }

  &:last-child {
    border-bottom: none;
  }
}

.hot-rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: $text-secondary;
  flex-shrink: 0;

  &.rank-1 {
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #d4af37;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  }

  &.rank-2 {
    background: linear-gradient(45deg, #c0c0c0, #e8e8e8);
    color: #999;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
  }

  &.rank-3 {
    background: linear-gradient(45deg, #cd7f32, #daa520);
    color: #8b4513;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
  }
}

.hot-content {
  flex: 1;
  min-width: 0;
}

.hot-item-title {
  font-size: 16px;
  font-weight: 500;
  color: $text-color;
  line-height: 1.4;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hot-heat {
  font-size: 12px;
  color: $text-secondary;
}

.hot-badges {
  display: flex;
  gap: 6px;
}

.hot-badge {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;

  &.new {
    background-color: #52c41a;
    color: white;
  }

  &.hot {
    background-color: #ff4d4f;
    color: white;
  }
}

.hot-trend {
  flex-shrink: 0;
  width: 20px;
  display: flex;
  justify-content: center;

  .trend-up {
    color: #52c41a;
    font-size: 16px;
  }

  .trend-down {
    color: #ff4d4f;
    font-size: 16px;
  }

  .trend-stable {
    color: $text-light;
    font-size: 14px;
  }
}

.hot-footer {
  padding: 16px 24px;
  text-align: center;
  border-top: 1px solid $border-light;
  background-color: $background-light;

  .el-button {
    color: $primary-color;
    font-size: 14px;

    &:hover {
      color: $primary-hover;
    }
  }
}

@media (max-width: 768px) {
  .hot-header {
    padding: 20px 16px 12px;
  }

  .hot-title {
    font-size: 18px;
  }

  .hot-item {
    padding: 12px 16px;
    gap: 12px;
  }

  .hot-rank {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .hot-item-title {
    font-size: 15px;
  }

  .hot-footer {
    padding: 12px 16px;
  }
}
</style>
